<template>
  <el-container style="height: 100vh;">
    <el-aside v-if="isLoggedIn" width="300px">
      <UserSidebar v-if="userRole === 'user'" />
      <AdminSidebar v-if="userRole === 'admin'" />
    </el-aside>
    <el-container>
      <el-main>
        <router-view @login-success="handleLoginSuccess" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import UserSidebar from './Sidebar/UserSidebar.vue'
import AdminSidebar from './Sidebar/AdminSidebar.vue'

export default {
  name: 'App',
  components: {
    UserSidebar,
    AdminSidebar
  },
  data() {
    return {
      isLoggedIn: false,
      userRole: '' // 初始化为空
    };
  },
  methods: {
    handleLoginSuccess(role) {
      this.isLoggedIn = true;
      this.userRole = role;
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100vh;
}

.el-aside {
  background-color: #84c2d8;
}
</style>
